<template>
  <div id="content">
    <div class="main">
      <div style="display: flex; align-items: baseline; margin-bottom: 20px">
        <h1>注册</h1>
        <router-link to="/login" style="margin-left: 245px">登录</router-link>
      </div>
      <el-form
        :model="registerInfo"
        ref="registerInfo"
        :rules="regRules"
        status-icon
        label-width="80px"
      >
        <el-form-item label="账号" prop="nickname">
          <el-input
            placeholder="小于20个字符且不包含空格"
            v-model="registerInfo.nickname"
            @blur="checkBlur"
          >
          </el-input>
        </el-form-item>

        <el-form-item label="密码" prop="password">
          <el-input
            placeholder="小于32个字符且不包含空格"
            v-model="registerInfo.password"
            type="password"
          ></el-input>
        </el-form-item>

        <el-form-item label="确认密码" prop="password2">
          <el-input
            placeholder="再次输入密码"
            v-model="registerInfo.password2"
            type="password"
          ></el-input>
        </el-form-item>

        <el-form-item label="性别">
          <el-radio v-model="registerInfo.gender" label="男">男</el-radio>
          <el-radio v-model="registerInfo.gender" label="女">女</el-radio>
        </el-form-item>

        <el-form-item label="邮箱" prop="email" ref="mail">
          <div>
            <el-input
              placeholder="推荐QQ邮箱"
              v-model="registerInfo.email"
            ></el-input>
          </div>
        </el-form-item>

        <el-form-item label="校验码">
          <div style="display: flex">
            <div>
              <el-input
                style="width: 120px"
                placeholder="4位数验证码"
                v-model="registerInfo.emailCode"
              ></el-input>
            </div>
            <div>
              <el-button
                style="padding: 10px 0px; margin-left: 14px; width: 120px"
                type="primary"
                :loading="mailLoad"
                @click="postCode"
              >
                发送邮箱校验码
              </el-button>
            </div>
          </div>
        </el-form-item>

        <!-- <el-form-item label="验证码">
          <el-input
            placeholder="验证码字母需大写"
            v-model="registerInfo.code"
          ></el-input>
        </el-form-item> -->

        <!-- <el-form-item>
          <img id="changeCode" :src="url" />
          <el-link type="primary" @click="changeImg" style="line-height: 20px"
            >看不清？</el-link
          >
        </el-form-item> -->

        <el-form-item>
          <el-button type="success" :loading="load" @click="reg"
            >注册</el-button
          >
          <el-button style="margin-left: 60px" @click="cancel">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="beian">
      <a
        href="https://beian.miit.gov.cn/"
        target="_blank"
        style="text-decoration: none; color: black; font-size: 13px"
        >Powered By Dong | 浙ICP备2022017856</a
      >
    </div>
  </div>
</template>

<script>
import { validNickName, validPassword, validEmail } from "@/utils/validate";
export default {
  name: "wsw-register",
  data() {
    //   表单验证
    var checkNickName = (rule, value, callback) => {
      //   console.log(this);
      if (!validNickName(value)) {
        callback(new Error("请输入2-12位用户名"));
      } else {
        // console.log(this.isRepeatName, "22");
        // if (this.isRepeatName) {
        //   callback(new Error("用户名已存在"));
        // } else {
        //   callback();
        // }
        callback();
      }
    };

    var checkPassword = (rule, value, callback) => {
      if (!validPassword(value)) {
        callback(new Error("请输入6-16位密码，密码需包含数字，字母，特殊字符"));
      } else {
        callback();
      }
    };

    var checkRePassword = (rule, value, callback) => {
      if (value !== this.registerInfo.password) {
        callback(new Error("两次密码不一致"));
      } else {
        callback();
      }
    };

    var checkEmail = (rule, value, callback) => {
      if (!validEmail(value)) {
        callback(new Error("请输入正确的邮箱格式"));
      } else {
        callback();
      }
    };

    return {
      registerInfo: {
        nickname: "",
        password: "",
        password2: "",
        gender: "",
        email: "",
        emailCode: "",
        // code: "",
      },
      url: "",

      regRules: {
        nickname: [
          {
            required: true,
            trigger: "blur",
            validator: checkNickName,
          },
        ],
        password: [
          { required: true, trigger: "blur", validator: checkPassword },
        ],
        password2: [
          { required: true, trigger: "blur", validator: checkRePassword },
        ],
        email: [{ required: true, trigger: "blur", validator: checkEmail }],
      },
      isRepeatName: false,
      load: false,
      mailLoad: false,
    };
  },

  mounted() {
    // this.changeImg();
  },
  methods: {
    checkBlur() {
      if (this.registerInfo.nickname != "") {
        this.checkName();
      }
    },

    // 检验昵称是否重复
    async checkName() {
      let result = await this.$API.reqCheckName(this.registerInfo.nickname);

      //   if (result.data) {
      //     this.isRepeatName = true;
      //   } else {
      //     this.isRepeatName = false;
      //   }

      if (result.data) {
        this.$message({
          message: "用户名已存在",
          type: "error",
        });
      }
    },
    async postCode() {
      if (!validEmail(this.registerInfo.email)) {
        this.$message({
          message: "请输入正确的邮箱",
          type: "warning",
        });
      } else {
        let result = await this.$API.reqMailCode(this.registerInfo.email);
        if (result.code == 2000) {
          this.$message({
            message: "发送成功",
            type: "success",
          });
        } else {
          this.$message({
            message: result.data,
            type: "info",
          });
        }
      }
    },

    // 验证码
    // changeImg() {
    //   this.url = "/wsw/checkCode/?" + new Date().getMilliseconds();
    // },

    reg() {
      const { emailCode, nickname, email, password, gender } =
        this.registerInfo;
      const data = { email, nickname, password, gender };
      this.$refs.registerInfo.validate(async (valid) => {
        if (valid) {
          let result = await this.$API.reqRegister(emailCode, data);
          if (result.code == 2000) {
            this.$message({
              message: "注册成功",
              type: "success",
            });
            this.$router.push("/login");
          }
        }
      });
    },
    cancel() {},
  },
};
</script>

<style scoped>
.el-input {
  width: 250px;
}
</style>